<template>
  <div>
    <Row>
      <Card>
        <p slot="title">
          <Icon type="navicon-round"></Icon>
          教师管理
        </p>
        <VmBtable type="edit" ref="VmBtable"
                  :columns="dataColumns"
                  :data="dataTable"
                  :searchparam="searchParam"
                  :exportBtn="false"
                  :batchDelBtn="false"
                  :action="excelImportUrl"
                  :actionsuccess="'teacher'"
                  v-on:searchFn="searchFn"
                  v-on:page-change="pageChangeFn"
                  v-on:addFn="addFn"
                  v-on:editFn="editFn"
                  v-on:deleteFn="deleteFn"
                  v-on:importSuccess="queryFn"
                  placeholder="教师名关键字"
                  searchText="教师名："
                  cleanText="刷新"
                  :exportPath="exportPath"
                  v-on:restFn="restFn">
          <div slot="search" class="db_inline">
            <div class="control">
              <Button @click="exportFn" type="info">
                <Icon type="navicon" size="20"></Icon>
                <span>全部导出</span>
              </Button>
            </div>
          </div>
        </VmBtable>
      </Card>
    </Row>
    <Modal v-model="modal.visible" :title="modal.title" v-on:on-ok="subForm" :mask-closable="false" width="680"
           v-on:on-cancel="cancelSub">
      <Form ref="Form" :model="modal.form" :label-width="80" label-position="right" :rules="modal.rules">
        <Row>
          <Col span="12">
            <FormItem label="名称" prop="name">
              <Input v-model="modal.form.name" placeholder="请输入姓名" style="width:73%"/>
            </FormItem>
            <FormItem label="性别" prop="sex">
              <RadioGroup v-model="modal.form.sex">
                <Radio label='女'>女</Radio>
                <Radio label='男'>男</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="联系号码" prop="phone">
              <Input v-model="modal.form.phone" placeholder="请输入联系号码" style="width:73%"/>
            </FormItem>
            <FormItem label="IC卡号" prop="icCard">
              <Input v-model="modal.form.icCard" placeholder="请输入ic卡号" style="width:73%"/>
            </FormItem>
            <FormItem label="入职时间" prop="inDate">
              <DatePicker v-model="modal.form.inDate" @on-change="($event)" type="date" placeholder="选择入职时间"
                          style="width: 73%"></DatePicker>
            </FormItem>
            <FormItem label="备注" prop="remark">
              <Input v-model="modal.form.remark" type="textarea" placeholder="备注信息" style="width:73%"/>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="头像" style="position: relative;right: 60px" prop="avatar">
              <LogoUpload ref="avatarUpload" accept="image/*" @get-file="getUploadFile" :multiple="false"
                          delImgPath="teacher/avatar">

              </LogoUpload>
            </FormItem>
            <FormItem label="状态" prop="avatar" v-if="modal.isEdit">
              <RadioGroup v-model="modal.form.duty">
                <Radio label='1'>在职</Radio>
                <Radio label='0'>离职</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="离职时间" prop="leaveDate" v-if="modal.form.duty==='0'">
              <DatePicker v-model="modal.form.leaveDate" @on-change="($event)" type="date" placeholder="选择离职时间"
                          style="width: 73%"></DatePicker>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancelSub">取消</Button>
        <Button type="primary" @click="subForm" :loading="modal.loading">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import API from "@/api/api";
import VmBtable from "@/components/vm/vm-btable";
import LogoUpload from "@/components/views/upload/Upload"
import Axios from 'axios'

export default {
  components: {
    VmBtable,
    LogoUpload
  },
  data() {
    const phoneValidate = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入联系人电话'));
      } else {
        callback();
      }
    };
    return {
      searchParam: {
        current: 1,
        size: 20,
        total: 0,
        name: '',
      },
      exportPath: 'http://wy-file.wekids.group/teacher.xlsx',
      excelImportUrl: Axios.defaults.baseURL + '/teacher/import',
      dataColumns: [
        {
          title: '序号',
          type: 'index',
          align: 'center',
          minWidth: 100,
        },
        {
          title: '名称',
          align: 'center',
          key: 'name',
          minWidth: 100,
        },
        {
          title: '用户名',
          align: 'center',
          key: 'username',
          minWidth: 100,
        },
        {
          title: '性别',
          align: 'center',
          key: 'sex',
          minWidth: 100,
        },
        {
          title: '联系号码',
          align: 'center',
          key: 'phone',
          minWidth: 180,
        },
        {
          title: '管理员权限',
          minWidth: 150,
          key: 'position',
          align: 'center',
          sortable: true,
          sortType: 'asc',
          render: (h, param) => {
            return h('div', [
              h('i-switch', {
                props: {
                  type: 'primary',
                  size: 'large',
                  value: param.row.position === '1'
                },
                style: {
                  marginRight: '5px',
                },
                on: {
                  'on-change': (value) => {
                    this.changePermission(param.row)
                  }
                }
              }, [
                h('span', {
                  slot: 'open'
                }, '启用'),
                h('span', {
                  slot: 'close'
                }, '停用')
              ])
            ]);
          }
        },
        {
          title: '状态',
          align: 'center',
          key: 'duty',
          minWidth: 100,
          sortable: true,
          sortType: 'desc',
          render: (h, param) => {
            let str = '在职';
            let color = 'green';
            if (param.row.duty === '0') {
              str = '离职';
              color = 'orange'
            }
            return h('div', {style: {color: color}}, str);
          }
        },
        {
          title: 'IC卡号',
          align: 'center',
          key: 'icCard',
          minWidth: 80,
        },
      ],
      operate: [],
      dataTable: [],
      modal: {
        visible: false,
        title: '',
        isEdit: false,
        loading: false,
        form: {
          name: '',
          sex: '2',
          icCard: '',
          phone: '',
          inDate: '',
          avatar: '',
          duty: '1',
          leaveDate: '',
          remark: ''
        },
        rules: {
          'name': [{
            required: true,
            trigger: 'blur',
            message: '必填项'
          }],
          'phone': [{
            required: true,
            trigger: 'blur',
            validator: phoneValidate
          }],
        }
      },
    };
  },
  methods: {
    exportFn() {
      this.$Modal.confirm({
        title: '提示',
        content: '是否导出全部老师？',
        onOk: () => {
          API.exportTeacher();
        },
        onCancel: () => {

        }
      })
    },
    getUploadFile(oldList, newFile) {
      this.modal.form.avatar = newFile.name;
    },
    changePermission(teacher) {
      API.changePermission(teacher).catch(resp => {
        this.queryFn();
      })
    },
    addFn() {
      Object.assign(this.modal, {
        visible: true,
        isEdit: false,
        title: '添加',
        form: {sex: '女', duty: '1'}
      })
    },
    editFn(data) {
      Object.assign(this.modal, {
        visible: true,
        isEdit: true,
        title: '编辑'
      });
      Object.assign(this.modal.form, data);
      this.modal.form.sex = data.sex + ''
      let avatar = data.avatar;
      if (!avatar) {
        return;
      }
      this.$refs.avatarUpload.acceptImageList([{
        id: avatar,
        key: avatar,
        fname: avatar,
        type: 'pic'
      }])
    },
    deleteFn(data) {
      API.deleteTeacher({id: data[0].id}).then(resp => {
        this.queryFn();
      })
    },
    restFn() {
      this.searchParam.current = 1;
      this.searchParam.size = 20;
      this.searchParam.name = '';
      this.queryFn();
    },
    queryFn() {
      API.fetchTeacher(this.searchParam).then(
        res => {
          let data = res.data;
          this.dataTable = data.records;
          this.searchParam.total = data.total;
        },
        error => {
          this.$Message.info(error.msg);
        }
      );
    },
    complete() {
      Object.assign(this.modal, {
        visible: false,
        title: '',
        loading: false,
      });
      this.$refs.Form.resetFields();
      this.$refs.avatarUpload.acceptImageList([]);
    },
    subForm() {
      this.$refs.Form.validate(valid => {
        if (valid) {
          let data = Object.assign(this.modal.form);
          this.modal.loading = true;
          if (data.id) {
            API.updateTeacher(data).then(resp => {
              this.complete();
              this.queryFn();
            }).catch(resp => {
              this.modal.loading = false;
            })
          } else {
            API.createTeacher(data).then(resp => {
              this.complete();
              this.queryFn();
            }).catch(resp => {
              this.modal.loading = false;
            })
          }
        }
      })
    },
    cancelSub() {
      this.complete();
    },
    pageChangeFn(current) {
      this.searchParam.current = current;
      this.queryFn();
    },
    searchFn(value) {
      this.searchParam.name = value;
      this.queryFn();
    },
  },
  created() {
  },
  mounted() {
    this.queryFn();
  }
}
</script>

<style scoped>

</style>
